<template>
    <div class="container" :class="{'vertical':isVertical}">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
    import {useSlots,computed} from "vue"
    import type {VNode,Component} from "vue"

    let uSlots = useSlots()

    const isVertical =computed(()=>{
       
        if(uSlots && uSlots.default){
            const VNode:VNode[] = uSlots.default()
            // console.log(VNode,"vNode")
            return  VNode.some((vNode)=>{
                const tag = (vNode.type as Component).name
                // console.log(tag,"vNode")
                // console.log(vNode.type,"vNode")
                return tag === "ElHeader"||tag === "ElFooter"
                
            })
           
        }else{
            return false
        }

    })

</script>

<style scoped lang="scss">
@import "../style/container.scss";
</style>